<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <link rel="stylesheet" href="../css/railView.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
    <script type="text/javascript" src="../../../railView/libs/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../js/base64.js" charset="utf-8"></script>
     <!-- vue -->
     <script src="../js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-form-item {
            margin-bottom: 1em;
            display: flex;
            align-items: center;
        }
        .el-form-item__content {
            margin-left: 0 !important;
        }
        .el-form-item__content {
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="buttom-container">
            <el-button type="info" @click="handleCreate">添加标签</el-button>
            <el-button type="info" @click="deleteNote">取消插入</el-button>
            <el-button type="info" @click="handleClearAll">移除标签</el-button>
        </div>
        <div id="left" style="width:100%;height:100%;position:relative;float:left"></div>
        <el-dialog
            title="标签设置"
            :visible.sync="dialogVisible"
            width="25%"
        >
        <el-form 
            ref="form" 
            :model="form" 
            label-width="130px"
        >
            <el-form-item label="标签内容：">
                <el-input v-model="form.text" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="文本颜色：">
                <el-color-picker v-model="form.color"></el-color-picker>
            </el-form-item>
            <el-form-item label="文字大小：">
                <el-input v-model.number="form.fontSize"></el-input>
            </el-form-item>
            <!-- <el-form-item label="激活创建：" prop="activate">
                <el-switch v-model="form.activate">
                </el-switch>
            </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
    </el-dialog>
    </div>
    <script id="viewerStartup">
        const vm = new Vue({
            el: '#app',
            data: {
                tk: null, 
                operatorId: null, 
                dialogVisible: false,
                imgUrl: '../img/pos.png',
                form: {
                    text: '',
                    color: '#409EFF',
                    fontSize: 70,
                    // activate: false
                }
            },
            mounted () {
                this.initModel()
            },
            methods: {
                initModel () {
                    let this_ = this
                    var proleft = new CarsView("left", 'csr', exampleModelId, this.callbackLeft, {
                        isShowAxis: true
                    });
                    proleft.then(function (value) {
                        this_.tk = value;
                        this_.operatorId = this_.tk.insertThreeDemensionalLabelsOperator()
                    });
                },
                callbackLeft(nodeNames, nodeIds, position, center, normal) {},
                handleCreate() {
                    this.dialogVisible = true
                    if(!this.operatorId) {
                        this.operatorId = this.tk.insertThreeDemensionalLabelsOperator()
                    }
                },
                deleteNote() {
                    this.tk.removeThreeDemensionalLabelsLabelsOperator(this.operatorId)
                    this.operatorId = null
                },
                handleClearAll() {
                    this.tk.clearAllThreeDemensionalLabels()
                },
                handleSubmit() {
                    const { text, color, fontSize } = this.form
                    this.tk.threeDemensionalLabelsSet(
                        {
                            text: text, 
                            textColor: color, 
                            textSize: fontSize, 
                            screenOriented: 'false', 
                            suppressCameraScale: true, 
                            borderColor: '#ff0000',
                            transparentBackground: true,
                            useMipmaps: true, 
                            showBorder: false, 
                            imgSrc: this.imgUrl, 
                            imgPosition: 'textTop', 
                            imgWidth: 100, 
                            imgHeight: 100, 
                            isShowLeaderLine: true
                        }
                    )
                    this.dialogVisible = false
                }
            }
        })
    </script>
</body>
</html>
